<template>
  <div>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
      <!--  用户名 -->
      <a-form-item label="账号名" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <a-input type="text" autocomplete="false" :value="accountName" disabled> </a-input>
      </a-form-item>

      <!-- 手机号 -->
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" label="手机号码">
        <a-input placeholder="11 位手机号" :value="phone" name="mobile" disabled>
          <span slot="addonBefore">+86</span>
        </a-input>
      </a-form-item>

      <!-- 短信验证码 -->
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" label="验证码" class="x-check-wrap">
        <a-input
          type="text"
          class="get-captcha-wrap"
          placeholder="验证码"
          :maxLength="6"
          name="captcha"
          v-decorator="['captcha', validatorRules.captcha]"
        >
          <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />
          <a-button
            class="getCaptcha"
            slot="addonAfter"
            size="default"
            :disabled="state.smsSendBtn"
            @click.stop.prevent="getCaptcha"
            v-text="(!state.smsSendBtn && '获取验证码') || state.time + ' s'"
          ></a-button>
        </a-input>
      </a-form-item>

      <a-form-item label="新密码" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" class="stepFormText">
        <a-input v-decorator="['password', validatorRules.password]" type="password" autocomplete="false"> </a-input>
      </a-form-item>
      <a-form-item label="确认密码" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" class="stepFormText">
        <a-input v-decorator="['confirmPassword', validatorRules.confirmPassword]" type="password" autocomplete="false">
        </a-input>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 19, offset: 5 }">
        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
        <a-button :loading="loading" type="primary" @click="nextStep" style="margin-left:20px">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { postAction } from '@/api/action'

export default {
  name: 'Step3',
  props: ['userList'],
  data() {
    return {
      loading: false,
      form: this.$form.createForm(this),
      accountName: this.userList.username,
      phone: this.userList.phone,
      state: {
        time: 60,
        smsSendBtn: false
      },

      //校验规则
      validatorRules: {
        username: { rules: [{ required: true, message: '用户名不能为空!' }] },
        password: {
          rules: [
            {
              required: true,
              // (?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/])
              //和特殊符号
              pattern: /^(?=.*[a-zA-Z])(?=.*\d).{8,12}$/,
              message: '密码由8-12位数字、大小写字母组成!'
            },
            { validator: this.handlePasswordLevel }
          ]
        },
        confirmPassword: {
          rules: [{ required: true, message: '密码不能为空!' }, { validator: this.handlePasswordCheck }]
        },
        captcha: {
          rules: [{ required: true, message: '请输入验证码!', whitespace: true }]
        }
      }
    }
  },
  methods: {
    /**
     * 获取短信验证码
     */
    getCaptcha(e) {
      e.preventDefault()
      let that = this
      this.state.smsSendBtn = true
      let interval = window.setInterval(() => {
        if (that.state.time-- <= 0) {
          that.state.time = 60
          that.state.smsSendBtn = false
          window.clearInterval(interval)
        }
      }, 1000)

      const hide = this.$message.loading('验证码已发送..', 0)
      let smsParams = {
        mobile: this.userList.phone,
        smsmode: '2' //忘记密码
      }

      postAction('/account/sms/send', smsParams).then(res => {
        if (res.code != 0) {
          this.state.smsSendBtn = false
          this.state.time = 60
           window.clearInterval(interval)
          setTimeout(hide, 1)
          this.cmsFailed(res.msg)
        }
        setTimeout(hide, 500)
      })
    },

    /**
     * 提交忘记密码修改
     */
    nextStep() {
      let that = this
      that.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          var params = {
            username: this.userList.username,
            phone: this.userList.phone,
            smscode: values.captcha,
            new_password: values.password,
            confirm_password: values.confirmPassword
          }

          console.log(params)

          postAction('/settings/forgotPwd/update', params).then(res => {
            if (res.code == 0) {
              var userList = {
                username: this.userList.username
              }
              console.log(userList)
              setTimeout(function() {
                that.$emit('nextStep', userList)
              }, 1500)
            } else {
              this.passwordFailed(res.msg)
              that.loading = false
            }
          })
        } else {
          that.loading = false
        }
      })
    },

    /**
     * 上一步
     */
    prevStep() {
      this.$emit('prevStep', this.userList)
    },

    /**
     * 校验两次密码不一样
     */
    handlePasswordCheck(rule, value, callback) {
      let password = this.form.getFieldValue('password')
      if (value && password && value.trim() !== password.trim()) {
        callback(new Error('两次密码不一致'))
      }
      callback()
    },

    /**
     * 验证码发送错误
     */
    cmsFailed(err) {
      this.$notification['error']({
        message: '错误',
        description: err,
        duration: 4
      })
    },

    /**
     * 密码更改失败
     */
    passwordFailed(err) {
      this.$notification['error']({
        message: '操作失败',
        description: err,
        duration: 4
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.stepFormText {
  margin-bottom: 24px;
}

.ant-form-item-label,
.ant-form-item-control {
  line-height: 22px;
}

.getCaptcha {
  display: block;
  width: 100px;
  height: 30px;
  background: transparent;
  border: none;
  overflow: hidden;
  outline: none;
  color: #fff;
  background-color: #1890ff;
  border: 1px solid #1890ff;
  border-radius: 0 4px 4px 0;
}

.ant-btn[disabled] {
  color: rgba(0, 0, 0, 0.25) !important;
  background-color: #f5f5f5 !important;
  border: none !important;
}
</style>
<style lang="scss">
.get-captcha-wrap {
  .ant-input-group-addon {
    padding: 0;
  }
}
</style>
